<template>
  <div id="components-form-demo-advanced-search">
    <a-form class="ant-advanced-search-form" :form="form">
      <a-row :gutter="24">
        <a-col :span="6">
          <a-form-item label="姓　　名" >
            <a-input v-decorator="['professorName']"/>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="性　　别">
            <j-dict-select-tag type="list" v-decorator="['professorSex']" :trigger-change="true" dictCode="sex" placeholder="请选择专家性别"/>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="出生年月">
            <j-date placeholder="请选择出生年月" v-decorator="['professorBirthday']" :trigger-change="true" />
          </a-form-item>
        </a-col>
        <a-col :span="5" >
          <a-upload
            name="file"
            listType="picture-card"
            class="avatar-uploader"
            :showUploadList="false"
            :action="uploadAction"
            :data="{'isup':1}"
            :headers="headers"
            :beforeUpload="beforeUpload"
            @change="handleChange"
          >
            <img v-if="picUrl" :src="getAvatarView()" alt="头像" style="height:140px;max-width:180px;border-radius:50%"/>
            <div v-else style="height:140px;width:140px;padding-top:35%">
              <a-icon :type="uploadLoading ? 'loading' : 'plus'" />
              <div class="ant-upload-text" style="color: dimgray">上传头像</div>
            </div>
          </a-upload>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="9">
          <a-form-item label="毕业院校">
            <j-dict-select-tag  type="list" v-decorator="['professorSchool']" :trigger-change="true" dictCode="school" placeholder="请选择毕业院校"/>
          </a-form-item>
        </a-col>
        <a-col :span="9">
          <a-form-item label="所学专业">
            <j-dict-select-tag type="list" v-decorator="['professorMajor']" :trigger-change="true" dictCode="school" placeholder="请选择所学专业"/>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="6">
          <a-form-item  label="毕业时间">
            <j-date placeholder="请选择毕业时间" v-decorator="['professorGraduateDate']" :trigger-change="true"/>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="学　　历">
            <j-dict-select-tag type="list" v-decorator="['professorEducationBackground']" :trigger-change="true" dictCode="school" placeholder="请选择学历"/>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="学　　位">
            <j-dict-select-tag type="list" v-decorator="['professorDegree']" :trigger-change="true" dictCode="school" placeholder="请选择学位"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="18">
          <a-form-item label="工作单位">
            <a-input v-decorator="['professorWorkUnit']" placeholder="请输入工作单位"></a-input>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="10">
          <a-form-item label="通讯地址">
            <a-input v-decorator="['professorAddress']" placeholder="请输入通讯地址"></a-input>          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="申报类别">
            <j-category-select
              v-decorator="['professorType']"
              pcode="B03"
              multiple
            />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="6">
          <a-form-item label="职　　务">
            <j-dict-select-tag type="list" v-decorator="['professorPosition']" :trigger-change="true" dictCode="school" placeholder="请选择职务"/>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="参加工作时间">
            <j-date placeholder="请选择参加工作时间" v-decorator="['professorBeginWork']" :trigger-change="true" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="技术职称">
            <j-dict-select-tag type="list" v-decorator="['professorTitle']" :trigger-change="true" dictCode="school" placeholder="请选择技术职称"/>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="6">
          <a-form-item label="从事专业">
            <a-input v-decorator="['professorWorkMajor']" placeholder="请输入从事专业"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="从事专业时间">
            <j-date placeholder="请选择从事专业时间" v-decorator="['professorMajorDate']" :trigger-change="true"/>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="身份证号">
            <a-input v-decorator="['professorIdentity']" placeholder="请输入身份证号"></a-input>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="10">
          <a-form-item label="家庭地址">
            <j-area-linkage type="cascader" v-decorator="['professorHomeAddress']" placeholder="请输入省市区"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="健康状态">
            <j-dict-select-tag type="list" v-decorator="['professorHealth']" :trigger-change="true" dictCode="school" placeholder="请选择健康状况"/>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="10">
          <a-form-item label="联系方式：">
            <a-input addon-before="办公室" v-decorator="['professorOfficeTel']"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item>
            <a-input addon-before="手机" v-decorator="['professorPhone']"/>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="18">
          <a-form-item label="">
            <span>本人支持或参加过的典型项目（包括项目名称、建设规模、投资额及所负责的内容）</span>
            <a-textarea  :rows="4" v-decorator="['professorProjectIntroduce']"/>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="18">
          <a-form-item>
            <span>业务主管部门</span>
            <a-textarea :rows="4" v-decorator="['professorLeadMsg']"/>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="18">
          <a-form-item >
            <span>行政审批局意见</span>
            <a-textarea :rows="4" v-decorator="['professorApproveMsg']"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="18" :style="{ textAlign: 'right' }">
          <a-button type="primary" @click="handleOk">
            Search
          </a-button>
          <a-button :style="{ marginLeft: '8px' }" @click="add">
            Clear
          </a-button>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script>
  import JDate from '@/components/jeecg/JDate'
  import JCategorySelect from '@/components/jeecg/JCategorySelect'
  import JTreeSelect from '@/components/jeecg/JTreeSelect'
  import pick from 'lodash.pick'
  import JAreaLinkage from '@comp/jeecg/JAreaLinkage'
  import ATextarea from "ant-design-vue/es/input/TextArea";
  import { httpAction } from '@/api/manage'
  // 导入
  import {getAction} from '@/api/manage'
  import Vue from 'vue'
  import { ACCESS_TOKEN } from "@/store/mutation-types"

  function getBase64(img, callback) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
  }
  export default {
    name:"DiyProfessorInfoWrite",
    components:{
      ATextarea,
      JAreaLinkage,
      JTreeSelect,
      JCategorySelect,
      JDate
    },
    data() {
      return {
        form:this.$form.createForm(this),
        imageUrl: '',
        model:{},
        validatorRules:{

        },
        headers:{},
        picUrl: "",
        uploadLoading:false,
        /*url:"/org/diyProfessorInfo/add"*/
        url:{
          fileUpload: window._CONFIG['domianURL']+"/sys/common/upload",
          imgerver: window._CONFIG['domianURL']+"/sys/common/static",
        }
      };
    },
    created(){
      const token = Vue.ls.get(ACCESS_TOKEN);
      this.headers = {"X-Access-Token":token}
    },
    computed:{
      uploadAction:function () {
        return this.url.fileUpload;
      }
    },
    methods: {
      beforeUpload: function(file){
        var fileType = file.type;
        if(fileType.indexOf('image')<0){
          this.$message.warning('请上传图片');
          return false;
        }
        //TODO 验证文件大小
      },
      handleChange (info) {
        this.picUrl = "";
        if (info.file.status === 'uploading') {
          this.uploadLoading = true;
          return
        }
        if (info.file.status === 'done') {
          var response = info.file.response;
          this.uploadLoading = false;
          console.log(response);
          if(response.success){
            this.model.img= response.message;
            this.picUrl = "Has no pic url yet";
          }else{
            this.$message.warning(response.message);
          }
        }
      },
      getAvatarView(){
        return this.url.imgerver +"/"+ this.model.img;
      },
/*      handleChange(info) {
        if (info.file.status === 'uploading') {
          this.loading = true;
          return;
        }
        if (info.file.status === 'done') {
          // Get this url from response in real world.
          getBase64(info.file.originFileObj, imageUrl => {
            this.imageUrl = imageUrl;
            this.loading = false;
          });
        }
      },
      beforeUpload(file) {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
          this.$message.error('You can only upload JPG file!');
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('Image must smaller than 2MB!');
        }
        return isJpgOrPng && isLt2M;
      },*/
      add () {
        console.log("进入add");
        this.edit({});
      },
      edit (record) {
        console.log("进入add"+record);
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.$nextTick(() => {
          /**
           *  我添加的    ,'professorBirthday','professorSchool','professorMajor','professorGraduateDate','professorEducationBackground','professorDegree','professorWorkUnit'
           ,'professorAddress','professorPosition','professorBeginWork','professorTitle','professorWorkMajor','professorMajorDate','professorIdentity'
           */
          this.form.setFieldsValue(pick(this.model,'professorType','professorName','professorSex','professorBirthday','professorSchool','professorMajor','professorGraduateDate','professorEducationBackground','professorDegree','professorWorkUnit'
            ,'professorAddress','professorPosition','professorBeginWork','professorTitle','professorWorkMajor','professorMajorDate','professorIdentity','professorHomeAddress',
            'professorOfficeTel','professorPhone','professorProjectIntroduce','professorLeadMsg','professorApproveMsg','professorHomeAddress','professorHealth'))
        });
        this.picUrl=this.model.img;
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk (){
        console.log("进入提交");
        const that = this;
        // 触发表单验证
        console.log("================"+this.model);
        this.form.validateFields((err, values) => {

          // 获取表单中type的id
          let formType = that.form.getFieldValue("professorType");
          // alert(formType);
          // 访问后台，查找hasChild
          let formRealType = "";
          let url = "/sys/category/findById?ids="+formType;
          console.log(url);
          getAction(url).then((res) => {
            if (res.success) {
              // alert("hasChild = " + res.result);
              formRealType = res.result;
              //  alert(formRealType==null)
              if(formRealType==0) {
                if (!err) {
                  console.log("进入提交状态");
                  console.log(err);
                  console.log(values);
                  let httpurl = '';
                  let method = '';
                  httpurl+=this.url;
                  method = 'post';
                  let formData = Object.assign(this.model, values);
                  console.log("表单提交数据",formData);
                  httpAction(httpurl,formData,method).then((res)=>{
                    console.log("res:"+res);
                    if(res.success){
                      console.log("res:"+res);
                      that.$message.success(res.message);
                      that.$emit('ok');
                    }else{
                      that.$message.warning(res.message);
                    }
                  }).finally(() => {
                    that.confirmLoading = false;
                    that.close();
                  })
                }
              }else{
                alert("类型选择错误");
              }
            }
          });



        })
      }
    },
  };
</script>
<style>
  .ant-advanced-search-form {
    padding: 24px;
    background: #fbfbfb;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
  }

  .ant-advanced-search-form .ant-form-item {
    display: flex;
  }

  .ant-advanced-search-form .ant-form-item-control-wrapper {
    flex: 1;
  }
  .avatar-uploader > .ant-upload {
    width: 128px;
    height: 128px;
  }
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }

  #components-form-demo-advanced-search .ant-form {
    max-width: none;
  }
  #components-form-demo-advanced-search .search-result-list {
    margin-top: 16px;
    border: 1px dashed #e9e9e9;
    border-radius: 6px;
    background-color: #fafafa;
    min-height: 200px;
    text-align: center;
    padding-top: 80px;
  }
</style>
<!--<a-col :span="5" >-->
<!--<a-upload-->
<!--name="avatar"-->
<!--list-type="picture-card"-->
<!--class="avatar-uploader"-->
<!--:show-upload-list="false"-->
<!--action="https://www.mocky.io/v2/5cc8019d300000980a055e76"-->
<!--:before-upload="beforeUpload"-->
<!--@change="handleChange"-->
<!--&gt;-->
<!--<img v-if="imageUrl" :src="imageUrl" alt="avatar" />-->
<!--<div v-else>-->
<!--<a-icon :type="loading ? 'loading' : 'plus'" />-->
<!--<div class="ant-upload-text">-->
<!--上传两寸照片-->
<!--</div>-->
<!--</div>-->
<!--</a-upload>-->
<!--</a-col>-->